<template>
	<view class="checkoutCounter" :class="equipment">
		<app-title :title='"收银台"'></app-title>




		<view class="checkoutCounter_orderNumber" v-if="res">
			订单编号：{{res.payinfo.ordersn}}
		</view>
		<!-- <view class="checkoutCounterBalance" v-if="e.pay_type === '20'">
			<p>YMD通证：<span>{{res.ymd}}</span>个</p>
		</view>
		<view class="checkoutCounterBalance" v-if="e.pay_type === '5'">
			<p>余额：<span>{{res.credit2}}</span>元</p>
		</view>
		<view class="checkoutCounterBalance" v-if="e.pay_type === '10'">
			<p>余额：<span>{{res.credit2}}</span>元</p>
			<p>绿色积分余额：<span>{{res.mjf}}</span>个</p>
		</view>
		<view class="checkoutCounterBalance" v-if="e.pay_type === '15'">
			<p>余额：<span>{{res.credit2}}</span>元</p>
			<p>购物券余额：<span>{{res.djf}}</span>个</p>
		</view>
		<view class="checkoutCounterBalance" v-if="e.pay_type === '25'">
			<p>余额：<span>{{res.credit2}}</span>元</p>
			<p>绿色积分余额：<span>{{res.mjf}}</span>个</p>
			<p>权益积分余额：<span>{{res.yjf}}</span>个</p>
		</view> -->
		<!--   //5  直供专区   10热销专区   15兑换专区   20生态专区 -->
		<view class="" style="border-top: 2rpx solid #f2f2f2;border-bottom: 2rpx solid #f2f2f2;"
			v-if="pay_array.length !== 0">
			<radio-group @change="radioChange">
				<label class="radio_box" v-for="(item, index) in pay_array" :key="index">
					<view>
						<radio :value="item.value+''" :checked="item.value + '' === pay_type" />
					</view>
					<view>{{item.name}}</view>
				</label>
			</radio-group>
		</view>
		<view class="checkoutCounter_box" v-else>
			<image src="@/static/home/yueimage.png" v-if="pay_type === '5'" mode="widthFix"></image>
			<!-- <image src="@/static/home/YMDimage.png" v-if="pay_type === '20'" mode="widthFix"></image>
			<image src="@/static/home/zuhezhifu.png" v-if="pay_type === '10' || pay_type === '15'" mode="widthFix">
			</image> -->
			<view class="checkoutCounter_box_text">
				<p>订单总金额：{{res.real_money}}元</p>
				<p>立即支付{{res.pay_button}}</p>
			</view>
		</view>

		<view class="checkoutCounter_an" @click="openFun">
			立即支付
		</view>


		<view class="pay_password">
			<uv-keyboard ref="keyboard" mode="number" @change="valChange" @backspace="backspace" :dotDisabled="true"
				@cancel="show = !show,value = ''" @confirm="order_pay_completeFun" :show="show">
				<slot name="default">
					<p style="padding: 20rpx;text-align: center;">请输入交易密码</p>
					<uv-code-input v-model="value" :disabledKeyboard='true' mode="line"
						style="padding: 20rpx;"></uv-code-input>
				</slot>
			</uv-keyboard>
		</view>
	</view>
</template>

<script>
	import {
		order_pay,
		order_pay_complete
	} from '@/api/home.js'
	export default {
		data() {
			return {
				openid: '',
				res: '',
				pay_type: '',
				show: false,
				value: '',
				pay_array: [

				],
				e: ''
			};
		},
		onLoad(e) {
			console.log(e);
			this.e = e;
			if (process.env.UNI_PLATFORM === 'h5') {
				// 在H5环境中打开
				console.log('在H5环境中打开');
				this.equipment = 'H5'
			} else if (process.env.UNI_PLATFORM === 'app-plus') {
				// 在App环境中打开
				console.log('在App环境中打开');
				this.equipment = 'App'
			}
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
					this.order_payFun({
						openid: res.data,
						pay_type: e.pay_type,
						id: e.Corderid
					});
					this.pay_type = e.pay_type;
				}
			});
		},
		methods: {

			openFun() {
				this.$refs.keyboard.open();
			},
			radioChange(e) {

				this.pay_type = e.detail.value;
			},
			valChange(e) {
				if (this.value.length === 6) {
					return
				} else {
					this.value += e;
				}
			},
			backspace(e) {
				if (this.value.length) this.value = this.value.substr(0, this.value.length - 1);
			},
			async order_payFun(up) {
				let data = await order_pay(up);
				this.res = data;
				if (data.pay_array !== undefined || data.pay_array !== null) {
					data.pay_array.forEach((item, index) => {
						this.pay_array.push(item)
					})
					console.log(this.pay_array);
				}
				console.log(data);
			},
			async order_pay_completeFun() {
				let up = {
					openid: this.openid,
					id: this.res.orderid,
					pay_type: this.pay_type,
					type: 'credit',
					paypwd: this.value
				}
				let data = await order_pay_complete(up);
				if (data.status === 1) {
					uni.reLaunch({
						url: `/pages/home/checkoutCounter/paySuccess/paySuccess?id=${this.res.payinfo.orderid}&result=true`
					})
				} else {
					this.value = '';
				}
				console.log(data);
			}
		}
	}
</script>

<style lang="scss">
	.H5 {
		height: calc(100vh - 88rpx);
	}

	.App {
		height: 100vh;
	}

	.checkoutCounter {
		width: 100%;
		display: flex;
		flex-direction: column;
		// padding: 20rpx;

		.checkoutCounter_orderNumber {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			border-top: 1rpx solid #F2F2F2;
			border-bottom: 1rpx solid #F2F2F2;
			font-size: 26rpx;
			padding: 0 22rpx;
			color: #666;
		}

		.checkoutCounterBalance {
			width: 100%;
			// height: 80rpx;
			// border-bottom: 1rpx solid #ccc;
			font-size: 26rpx;
			padding: 0 22rpx;
			color: #666;
			line-height: 50rpx;
			margin-bottom: 30rpx;

			p {
				color: #666;

				span {
					color: #FF5555;
					padding: 0 10rpx 0 0;
				}
			}
		}

		.checkoutCounter_box {
			width: 100%;
			// height: 100rpx;
			padding: 20rpx;
			color: #333;
			font-size: 26rpx;
			margin: 0 auto;
			line-height: 50rpx;
			display: flex;
			border-bottom: 1rpx solid #F2F2F2;
			align-items: center;

			.checkoutCounter_box_text {
				margin-left: 40rpx;
				padding: 0 40rpx;
				position: relative;
			}

			.checkoutCounter_box_text::after {
				content: '';
				width: 2rpx;
				height: 70%;
				position: absolute;
				background-color: #ccc;
				left: 0;
				top: 0;
				bottom: 0;
				margin: auto;
			}

			image {
				width: 100rpx;
			}
		}


		.checkoutCounter_an {
			width: 80%;
			height: 80rpx;
			background: linear-gradient(3deg, #ff3232, #ff3232, #ff8719);
			border-radius: 100rpx;
			margin: 30rpx auto;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
		}

		.radio_box {
			width: 100%;
			height: 88rpx;
			display: flex;
			align-items: center;
			padding: 0 50rpx;
			box-shadow: 0 0 2rpx #ccc;
		}
	}
</style>